<template>
	<view class="content">
		<view class="child-system">
			<view class="controller">
				<view class="quit" @click="closeData">关闭</view><!-- <view class="reset" @click="resetData">重置</view> --><view class="ok" @click="ok">确认</view>
			</view>
			<view class="item-list">
				<template v-show="station.length > 0">
					<u-checkbox-group  :wrap="wrap" @change="checkboxGroupChange">
						<u-checkbox 
							v-model="item.checked"
							v-for="(item, index) in station" :key="index" 
							:name="item.text"
						>{{item.text}}</u-checkbox>
					</u-checkbox-group>
					<!-- <view class="item" v-for="(item, index) in station" :key="index">{{item.text}}</view> -->
				</template>
				<view v-show="station.length == 0" class="empty">无数据</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default{
		props: ['station'],
		data() {
			return {
				name_list:'',
				wrap: true,
			}
		},
		
		methods: {
			closeData() {
				this.$emit('close');
			},
			checkboxGroupChange(e) { 
				this.name_list = e;
				// 'console.log(e)
				// if(this.faultStatus==2&&e.length>2){ 
				// 	let lastEstring= e[e.length-1];
				// 	let tempStationList = this.stationList 
				// 	tempStationList.forEach(item=>{
				// 		if(item.text==lastEstring){
				// 			item.checked = false
				// 		}
				// 	})
				// 	e.splice(-1)
				// 	this.name_list = e
				// 	uni.showToast({title:'只能选择两个站点',icon:'none'});
				// 	return;
				// }
				// else{
					
				// }'
			},
			ok() {
				let id = [];
				this.station.map((item) => {
					if(this.name_list.includes(item.text)) id.push(item.id);
				})
				this.$emit('setDep',{ name: this.name_list, id });
			}
		}
	}
</script>

<style scoped>
	.fixed{
		position: fixed;top: 0;left: 0;width: 100%;height: 100vh;overflow: auto;z-index: 1000;background: #F9FBFE;
	}
	.system{
		width: 91.5%;margin: 10px auto;color: #000;
	}
	.system>.title{
		line-height: 36px;font-size: 16px;font-weight: bold;
	}
	.system .add{
		float: right;color: #fff;background: #307BE0;width: 70px;line-height: 36px;font-size: 12px;text-align: center;border-radius: 4px;
	}
	.system .list{
		border-radius: 4px;font-size: 14px;margin-top: 15px;color: #303133;box-shadow: 0 0 2px 2px rgb(0 0 0 / 10%);
	}
	.system>.list:last-child{
		margin-bottom: 40px;
	}
	.system .list>.title{
		background: #d8d8d8;line-height: 50px;padding: 0 15px;height: 50px;
	}
	.system .list>.title>.remove{
		color: red;float: right;
	}
	.list>.list-info{
		background: #fff;padding-left: 15px;
	}
	.list>.list-info .hr{
		height: 1px;background: #d8d8d8;
	}
	.child-system{
		position: fixed;left: 0;bottom: 0;width: 100%;background: #fff;color: #000;font-size: 12px;z-index: 100;/* height: 50vh;overflow: auto; */
	}
	.child-system>.controller{
		line-height: 40px;padding: 0 10px;border-bottom: 1px solid #D7D7D7;position: relative;
	}
	.child-system>.controller>.quit, .child-system>.controller>.ok{
		display: inline-block;
	}
	.child-system>.controller>.reset{
		position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
	}
	.child-system>.controller>.ok{
		float: right;line-height: 40px;
	}
	.system-name{
		line-height: 46px;border-bottom: 1px solid #D7D7D7;height: 46px;color: #2979FF;font-size: 14px;
	}
	.system-name>.nowrap{
		width: 96%;white-space: nowrap;overflow-x: scroll;margin: 0 auto;
	}
	.system-name>.nowrap>.name{
		display: inline-block;
	}
	.item-list{
		height: 40vh;overflow: auto;padding: 0 15px;
	}
	.item{
		line-height: 37px;border-bottom: 1px solid #D7D7D7;padding: 0 15px;
	}
	.push{
		position: fixed;bottom: 0;left: 0;color: #fff;background: #307BE0;width: 100%;line-height: 36px;font-size: 12px;text-align: center;
	}
	.empty{
		padding: 30px;text-align: center;font-size: 16px;
	}
</style>

<style>
	.u-checkbox{
		line-height: 37px;
	}
</style>
